<template>
  <div class="serialize-article" @click="goToMemoriesChapter">
    <div class="serialize-container">
      <div class="serialize-pic-item">
        <img :src="yearlist.cover">
        <p class="finished">#&nbsp;{{isFinished}}</p>
        <p class="title">{{yearlist.title}}</p>
      </div>
      <div class="serialize-text">
        <p class="forward">{{yearlist.forward}}</p>
        <p class="backward">{{yearlist.subtitle}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SerializeArticleView",
  props: {
    yearlist: Object,
  },
  data() {
    return {};
  },

  mounted() {
    // this.goToMemoriesChapter();
     this.$nextTick(() =>{

     });
  },
  computed: {
    isFinished() {
      return this.yearlist.finished == true ? "已完结" : "未完结";
    },
  },
  methods: {
    // 点击跳转往章节目录列表
    goToMemoriesChapter(){
      let {id,serial_id,category} = this.yearlist;
      // console.log(id,serial_id,category);
      this.$router.push({
        path: "/memories",
        query: {
          id,
          serial_id,
          category,
        }
      })
    //    this.$nextTick(() =>{
    //     this.$router.push({
    //     path: "/memories",
    //     query: {
    //       id,
    //       serial_id,
    //       category,
    //     }
    //   })
    //  });
    }
  },
};
</script>

<style lang="scss" scoped>
.serialize-article {
  width:100vw;
  // height: 100vh;
  padding: 0 10px;
    // width:100vw;

    // padding: 30px 10px 10px;
    box-sizing: border-box;


  // box-sizing: border-box;
  .serialize-container {
    width:100%;
    // padding: 30px 10px 10px;
    margin-bottom: 25px;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;

    // margin-bottom: 10px;
    .serialize-pic-item {
      position:relative;

     .finished{
       position:absolute;
       top: 14px;
       left: 0;
       padding:0 10px;
       font-size:12px;
       color: rgb(243, 239, 239);
     }
     .title{
       position:absolute;
       left: 0;
       bottom: 18px;
       padding:0 10px;
       font-size:18px;
       color: rgb(253, 252, 252);

     }
      img {
        display: block;
        width: 100%;
      }
    }
    .serialize-text {
      padding: 5px 10px;
      font-size: 12px;
      .forward {
        color: rgb(166 160 160);
      }
      .backward {
        color: rgb(211 200 200);
      }
      p {
        width: 100%;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>